<template>
  <WithDialog
    :visible.sync="dialogVisible"
    title="访客信息编辑"
    :close-on-click-modal="false"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="来访单位" prop="company_name">
        <el-input v-model="formData.company_name" placeholder="请输入来访单位" />
      </el-form-item>

      <el-form-item label="来访人" prop="visitor">
        <el-input v-model="formData.visitor" placeholder="请输入来访人姓名" />
      </el-form-item>

      <el-form-item label="来访人数" prop="fellow">
        <el-input-number
          v-model="formData.fellow"
          :min="1"
          :max="50"
          placeholder="请输入人数"
        />
      </el-form-item>

      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入联系电话" />
      </el-form-item>

      <el-form-item label="来访时间" prop="arrive_time">
        <el-date-picker
          v-model="formData.arrive_time"
          type="datetime"
          placeholder="选择来访时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="{
            disabledDate: time => time.getTime() < Date.now() - 8.64e7
          }"
        />
      </el-form-item>

      <el-form-item label="来访事由" prop="reason">
        <el-input
          v-model="formData.reason"
          type="textarea"
          :rows="3"
          placeholder="请输入详细事由"
        />
      </el-form-item>
    </el-form>
  </WithDialog>
</template>

<script>
import WithDialog from '@/components/WithDialog/withDialog'

export default {
  name: 'EditDialog',
  components: {
    WithDialog
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: { },
      rules: {
        fellow: [{ required: true, message: '请输入来访人数', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        arrive_time: [{ required: true, message: '请选择来访时间', trigger: 'change' }],
        reason: [{ required: true, message: '请输入来访事由', trigger: 'blur' }],
        visitor: [{ required: true, message: '请输入来访人姓名', trigger: 'blur' }]
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.formData = { ...val }
      },
      immediate: true
    }
  },
  methods: {
    handleConfirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('confirm', this.formData)
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
